<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间戳工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
    <style>
        .textinput {
            width: 80%;
            height: 33px;
        }
    </style>
</head>

<body>
<div class="layui-container">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>字符串MD5加密</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-md6 layui-col-space2">
            <input type="text" id="md5input" class="layui-text textinput" placeholder="请输入字符串">
        </div>
        <div class="layui-col-md6">
            <input type="text" id="md5output" class="layui-text textinput" placeholder="加密值">
            <button class="layui-btn" func="md5encrypt">加密</button>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>URL(Decoder|Encoder)</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-md5">
            <textarea class="layui-textarea" name="urlInput" id="urlInput"></textarea>
        </div>
        <div class="layui-col-md1" style="margin-left: 20px;">
            <div class="layui-row">
                <button class="layui-btn" func="urlEncode">编码</button>
            </div>
            <div class="layui-row" style="margin-top: 20px;">
                <button class="layui-btn" func="urlDecode">解码</button>
            </div>
        </div>
        <div class="layui-col-md5">
            <textarea class="layui-textarea" name="urlOutput" id="urlOutput"></textarea>
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title">
        <legend>BASE64(Decoder|Encoder)</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-md5">
            <textarea class="layui-textarea" name="base64Input" id="base64Input"></textarea>
        </div>
        <div class="layui-col-md1" style="margin-left: 20px;">
            <div class="layui-row">
                <button class="layui-btn" func="base64Encode">编码</button>
            </div>
            <div class="layui-row" style="margin-top: 20px;">
                <button class="layui-btn" func="base64Decode">解码</button>
            </div>
        </div>
        <div class="layui-col-md5">
            <textarea class="layui-textarea" name="base64Output" id="base64Output"></textarea>
        </div>
    </div>
</div>


<script src="static/jquery/jquery.min.js"></script>
<script src="static/layui/layui.js" charset="utf-8"></script>
<script>
    $("button").on('click', function () {
        var othis = $(this);
        var func = othis.attr("func");
        if (func == 'md5encrypt') {
            md5encrypt();
        } else if (func == 'urlEncode') {
            urlEncode();
        } else if(func == 'urlDecode') {
            urlDecode();
        } else if(func == 'base64Encode') {
            base64Encode()
        } else if(func == 'base64Decode') {
            base64Decode()
        }
    })

    function base64Encode() {
        var input = $('#base64Input').val();
        if(input == '') {
            alert('输入不能为空');
            return;
        }
        $('#base64Output').val(btoa(input));
    }
    
    function base64Decode() {
        var input = $('#base64Input').val();
        if(input == '') {
            alert('输入不能为空');
            return;
        }
        $('#base64Output').val(atob(input));
    }
    function urlEncode() {
        var urlInput = $('#urlInput').val();
        if(urlInput == '') {
            alert('输入不能为空');
            return;
        }
        $('#urlOutput').val(encodeURIComponent(urlInput));
    }
    function urlDecode() {
        var urlInput = $('#urlInput').val();
        if(urlInput == '') {
            alert('输入不能为空');
            return;
        }
        $('#urlOutput').val(decodeURIComponent(urlInput));
    }
    function md5encrypt() {
        var input = $('#md5input').val();
        $.get('rest/encrypt/md5', {"inputstr": input}, function (resp) {
            $('#md5output').val(resp);
        })
    }
</script>
</body>
</html>